<template>
  <div>
      <el-form ref="form" :model="form" :rules="rules" label-position=“left” label-width="120px">
        <el-form-item label="所属表">
          {{tableName || tabInfo.tableName}}
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="列名" prop="columnName">
              <el-input v-model="form.columnName" placeholder="请输入列名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段名称" prop="columnComment">
              <el-input v-model="form.columnComment" placeholder="请输入字段名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否主键" prop="primaryKey">
              <el-radio v-model="form.primaryKey" :label="true">是</el-radio>
              <el-radio v-model="form.primaryKey" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外键" prop="foreignKey">
              <el-radio v-model="form.foreignKey" :label="true">是</el-radio>
              <el-radio v-model="form.foreignKey" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否允许为空" prop="isNullable">
              <el-radio v-model="form.isNullable" label="YES">是</el-radio>
              <el-radio v-model="form.isNullable" label="NO">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="ordinalPosition">
              <el-input-number v-model="form.ordinalPosition" :min="0"  label="请输入排序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="数据类型" prop="dataType">
          <el-select v-model="form.dataType" :disabled="form.columnId !== ''" placeholder="请选择数据类型">
            <el-option v-for="(value, key) in dataTypeList" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.dataType === 'datetime'" label="日期刻度" prop="datetimePrecision">
          <el-input-number v-model="form.datetimePrecision" :min="0" :max="10" label="请输入日期刻度"></el-input-number>
        </el-form-item>
        <el-row v-else>
          <el-col v-if="form.dataType === 'int'" :span="12">
            <el-form-item label="数值精度" prop="numericPrecision">
              <el-input-number v-model="form.datetimePrecision" :min="0" :max="10" label="请输入数值精度"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col v-if="form.dataType === 'int'" :span="8">
            <el-form-item label="数值刻度" prop="numericScale">
              <el-input-number v-model="form.numericScale" :min="0" :max="10" label="请输入数值刻度"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="值类型" prop="valueType">
              <el-select v-model="form.valueType" placeholder="请选择值类型">
                <el-option v-for="(value, key) in valueTypeList" :key="key" :label="value" :value="key" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="值数据" prop="valueData">
          <el-input type="textarea" :rows="2" v-model="form.valueData" placeholder="请输入值数据" />
        </el-form-item>
        <div style="text-align: center;">
          <el-button v-if="resetText" @click="handleReset">{{resetText}}</el-button>
          <el-button v-if="cancelText" @click="handleCancel">{{cancelText}}</el-button>
          <el-button v-if="submitText" type="primary" :loading="btnLoading" @click="handleSubmit">{{submitText}}</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
import { getInfoById } from '@/api/workflow/form/table'
import { create, update } from '@/api/workflow/form/columns'
import enums from '@/views/workflow/utils/enum'
export default {
  props: {
    tableId: {
      type: String,
      default: ''
    },
    tableName: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      default: function() {
        return null
      }
    },
    resetText: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: ''
    },
    submitText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabInfo: {},
      form: {
        characterMaximumLength: 0, // 字符的最大长度
        columnComment: '', // 列描述
        columnId: '', // id
        columnName: '', // 列名
        columnType: Object.keys(enums.COLUMN_TTYPE)[1], // 列类型，BASE_COLUMN基础表列，EXT_COLUMN扩展列
        dataType: '', // 数据类型
        datetimePrecision: 0, // 日期刻度
        foreignKey: false, // 是否外键
        isNullable: 'YES', // 是否允许为空，NO否YES是
        numericPrecision: 0, // 数值精度
        numericScale: 0, // 数值刻度
        ordinalPosition: 0, // 排序
        primaryKey: false, // 是否主键
        primaryTableColumn: '', // 对应主表的列
        tableId: '', // 表ID
        valueData: '', // 值数据
        valueType: '' // 值类型，DEFAULT默认值，SQL查询值，SQL LIST查询列表，DICTIONARIES字典，JAVASCRIPT MATH js公式，JAVA MATH java公式
      },
      rules: {
        columnName: [{ required: true, message: '请输入列名', trigger: 'blur' }],
        dataType: [{ required: true, message: '请选择数据类型', trigger: 'change' }]
      },
      btnLoading: false
    }
  },
  watch: {
    row: {
      handler(n, o) {
        this.form = JSON.parse(JSON.stringify(n))
      },
      deep: true,
	    immediate: true
    }
  },
  computed: {
    dataTypeList() {
      return enums.DATA_TYPE
    },
    valueTypeList() {
      return enums.VALUE_TYPE
    }
  },
  created() {
    this.getTabInfo()
  },
  methods: {
    getTabInfo() {
      if (this.tableId) {
        getInfoById(this.tableId).then(res => {
          this.tabInfo = res.data
        })
      }
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    handleReset() {
      this.resetForm()
    },
    handleCancel() {
      this.resetForm()
      this.$emit('onCancel')
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.btnLoading = true
          const data = JSON.parse(JSON.stringify(this.form))
          if (this.tableId) { // 修改时内部提交
            if (this.form.columnId) {
              update(this.form).then(res => {
                this.$message.success('修改成功')
                this.resetForm()
                this.$emit('onSubmit', data)
                this.btnLoading = false
              })
            } else {
              this.form.tableId = this.tableId
              create(this.form).then(res => {
                this.$message.success('新增成功')
                this.resetForm()
                this.$emit('onSubmit', data)
                this.btnLoading = false
              })
            }
          } else {
            this.resetForm()
            this.$emit('onSubmit', data)
          }
        }
      })
    }
  }
}
</script>
